<template>
  <div class="">
 <el-dialog
  title="编辑分类"
  :visible.sync="categoryDialogVisible"
  width="30%"
  center>
   <el-input v-model="category.title"></el-input>
  <span slot="footer" class="dialog-footer">  
    <el-button type="primary" 
    @click="saveCategory()">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="编辑分类"
  :visible.sync="postDialogVisible"
  width="250px"
  center>
   <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in categorys"
      :key="item._id"
      :label="item.title"
      :value="item.title">
    </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">  
    <el-button type="primary" @click="artecleDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  <el-row :gutter="20" class="h100">
  <el-col :span="4" class="h100" >
    <div 
     v-loading="categorysLoading" 
     element-loading-background="rgba(0, 0, 0, 0.1)"
    class="grid-content bg-purple category-box">
      <div class="go-home cp">
        <a>回到首页</a>
        </div>
      <div  
     
      
      @click="newCategory"
       v-loading="newCategoryLoading" 
      class="new-category cp">新建分类
      </div>
        <ul
        
         class="category" v-if="categorys.length>0">
            
          <li class="item"
        
           @click="changeCategory(v)"
           v-for="(v,index) in categorys"
           :class="v._id==currentCategory?'activa':''"

            :key="index">
            {{v.title}}
           <span 
            
           
           class="right-icon">
           <i class="el-icon-delete"></i>
           <i 
            @click.stop="editCategory(v)"
           class="el-icon-edit"></i>
           
           </span>
           </li>
        </ul>
    </div>
  </el-col>
  <el-col :span="4" class="posts-group h100">
    <div class="grid-content bg-purple posts-box h100">
    <div 
    v-loading="newPostsLoading"
    class="new-post" @click="newArtcle()">新建文章</div>
    <ul 
    v-loading="postsLoading" 
      
      element-loading-text="文章列表加载"
      class="posts" v-if="posts.length>0">
          <li 
          class="item"
           @click="changePost(v)"
           v-for="(v,index) in posts"
           :class="v._id==currentPost?'activa':''"
            :key="index">
            {{v.id}}
            {{v.title}}
             <span class="right-icon">
               <i
                 @click.stop="editPost()"
                class="el-icon-edit"></i>
              </span>
            </li>
        </ul>
    </div></el-col>
  <el-col :span="15" class="h100">
    <div 
    v-loading="postLoading" 
      
      element-loading-text="加载中"

    class="h100 grid-content bg-purple">
     

 
    <el-input
    @keydown.prevent.native.ctrl.83="save(post)"
    :disabled="!post._id"
     class="title" v-model="post.title" ></el-input>
  
   
  <Markdown 
 height="500px"
 @save='save(post)'

  :preview="!post._id"
  v-model="post.content"
  ></Markdown>
    
    </div></el-col>
</el-row>

  
  </div>
</template>

<script>
import api from "@/api";
import Markdown from "@/components/Markdown";
import { formatDate, now } from "@/utils/date";
import { unescape } from "@/utils/encoding";
export default {
  name: "Post",
  created() {
    this.currentPost = this.$route.params.id;
    this.currentCategory = this.$route.params.cid;
     console.log(this.currentCategory)
    this.queryPost(this.currentCategory);
   this.findPost(this.currentPost);
   this.queryCategory();
  },
  // watch: {
  //   $route: () => {
  //     console.log("路由改变");
  //   }
  // },
  methods: {
    // 编辑文章分类弹出框
    editPost() {
      this.postDialogVisible = true;
    },
    editCategory(v) {
      this.categoryDialogVisible = true;
      this.category = v;
    },
    newCategory() {
      this.newCategoryLoading = true;
      this.saveCategory({
        title: "新建分类"
      }).then(res => {
        this.newCategoryLoading = false;
        let data = res.data.data;
        this.categorys.unshift(data);
      });
    },
    saveCategory(data) {
      return api.saveCategory(data || this.category).then(res => {
        //  return res;
        this.categoryDialogVisible = false;
        return res;
      });
    },
    newArtcle() {
      this.newPostsLoading = true;
      this.save({
        cid: this.currentCategory,
        content: "",
        title: formatDate(now())
      }).then(res => {
        let data = res.data.data;
        // console.log(data);
        this.changePost(data);
        this.currentPost = data._id;
        this.post = data;
        this.posts.unshift(data);
        // console.log('sss',this.posts);
        this.newPostsLoading = false;
      });
    },
    // 改变文章
    changePost(item) {
      console.log("改变文章");
      this.currentPost = item._id;
      // this.currentPost = id;
      this.$router.push({
        name: "postEdit",
        params: {
          id: item._id,
          cid: item.cid
        }
      });
      this.findPost(item._id);
    },
    // 改变分类
    changeCategory(item) {
      console.log('改变分类')
      this.currentCategory = item._id;
      this.currentPost = null;
      this.queryPost(item._id);
    },
    // 查找文章
    findPost(id) {
      if (!id) {
        return;
      }
      this.postLoading = true;
      api.findPost({ id: id }).then(res => {
        this.postLoading = false;
        this.post = res.data.data;
        if (this.post) {
       //   debugger
         this.currentCategory = this.post.cid;
        }
      });
    },
    // 查询分类
    queryCategory() {
      console.log('查询所有分类')
      this.categorysLoading = true;
      // axios.get("/api/index.php/Home/Category").then(res => {
      api.queryCategory({}).then(res => {
        this.categorys = res.data.data;
       // console.log('***',this.categorys)
        //如果当前分类没有带过来
        if(!this.currentCategory&&this.categorys&&this.categorys.length>0){
           this.changeCategory(this.categorys[0]);
        }
        //console.log(this.categorys);
        this.categorysLoading = false;
      });
    },
    // 查询分类下文章
    queryPost(cid) {
      if(!cid){
        return false;
      }
      console.log("查询分类下文章",cid);
      this.postsLoading = true;
      api.queryPost({ cid: cid }).then(res => {
        this.posts = res.data.data;
        if (!this.currentPost && this.posts[0]) {
          // 获取第一个对象
          this.changePost(this.posts[0]);
        } else if (!this.posts[0]) {
          // console.log("888888888");
          this.post = {};
          this.changePost({
            cid: cid
          });
        }
        this.postsLoading = false;
      });
    },

    save(data) {
      console.log('保存文件')
      this.postLoading = true;
      // debugger
      return api.savePost(data).then(res => {
        //  this.postsLoading = false;
        this.postLoading = false;
        console.log(res);
        return res;
      });
    }
  },
  components: {
    Markdown
  },
  watch: {
    "post.title"() {
      for (let i = 0; i < this.posts.length; i++) {
        if (this.posts[i]._id == this.post._id) {
          this.$set(this.posts[i], "title", this.post.title);
          break;
        }
      }
    }
  },
  data() {
    return {
      newPostsLoading: false,
      newCategoryLoading: false,
      categorysLoading: false,
      postsLoading: false,
      postLoading: false,
      category: {},
      categorys: [],
      post: {},
      currentPost: null,
      currentCategory: null,
      categoryDialogVisible: false,
      postDialogVisible: false,
      posts: []
    };
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  src="./ae.css" scoped>

</style>
